import React from 'react';
import { Card, Typography, Button, Space, Avatar } from 'antd';
import { UserOutlined, LogoutOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { APP_CONFIG } from '../../config';
import './index.css';

const { Title, Text } = Typography;

const Dashboard: React.FC = () => {
  const navigate = useNavigate();
  
  // 获取用户信息
  const userInfo = JSON.parse(localStorage.getItem(APP_CONFIG.LOGIN.USER_INFO_KEY) || '{}');
  
  // 退出登录
  const handleLogout = () => {
    localStorage.removeItem(APP_CONFIG.LOGIN.TOKEN_KEY);
    localStorage.removeItem(APP_CONFIG.LOGIN.USER_INFO_KEY);
    navigate(APP_CONFIG.ROUTES.LOGIN);
  };

  return (
    <div className="dashboard-container">
      <div className="dashboard-header">
        <div className="dashboard-title">
          <Title level={2}>{APP_CONFIG.NAME}</Title>
          <Text type="secondary">欢迎回来，{userInfo.name || '管理员'}</Text>
        </div>
        <div className="dashboard-user">
          <Space>
            <Avatar 
              size="large" 
              icon={<UserOutlined />} 
              src={userInfo.avatar}
            />
            <div className="user-info">
              <Text strong>{userInfo.name || '管理员'}</Text>
              <br />
              <Text type="secondary">{userInfo.role || 'admin'}</Text>
            </div>
            <Button 
              type="primary" 
              danger 
              icon={<LogoutOutlined />}
              onClick={handleLogout}
            >
              退出登录
            </Button>
          </Space>
        </div>
      </div>
      
      <div className="dashboard-content">
        <Card title="系统概览" className="dashboard-card">
          <div className="dashboard-stats">
            <div className="stat-item">
              <Title level={3}>0</Title>
              <Text>总用户数</Text>
            </div>
            <div className="stat-item">
              <Title level={3}>0</Title>
              <Text>习题总数</Text>
            </div>
            <div className="stat-item">
              <Title level={3}>0</Title>
              <Text>待审核</Text>
            </div>
            <div className="stat-item">
              <Title level={3}>0</Title>
              <Text>今日活跃</Text>
            </div>
          </div>
        </Card>
        
        <Card title="快速操作" className="dashboard-card">
          <Space wrap>
            <Button type="primary" size="large">
              用户管理
            </Button>
            <Button type="primary" size="large">
              习题管理
            </Button>
            <Button type="primary" size="large">
              审核管理
            </Button>
            <Button type="primary" size="large">
              系统设置
            </Button>
          </Space>
        </Card>
      </div>
    </div>
  );
};

export default Dashboard;
